<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片 -->
		<el-card class="box-card">
			<!-- 添加商品按钮 -->
			<el-row>
				<el-col><el-button type="primary" @click="addCate">添加分类</el-button></el-col>
			</el-row>

			<!-- 表格 -->
			<tree-table :data="cateList" :columns="columns" :selection-type="false" show-index index-text="#" border :expand-type="false">
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen;"></i>
					<i class="el-icon-success" v-else style="color: red;"></i>
				</template>
				<!-- 排序 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
					<el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
					<el-tag size="mini" type="warning" v-else>三级</el-tag>
				</template>
				<!-- 操作 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
				</template>
			</tree-table>

			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[1, 3, 5, 10]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>
		
		
		<!-- 添加分类对话框 -->
		<el-dialog
		  title="提示"
		  :visible.sync="addCateDialogVisible"
		  width="50%"
			@close="cateDialgVisibleClosed"
		  >
		  <!-- 对表单的信息 -->
			<el-form :model="addCateForm" 
							 :rules="addCateFormRules" 
							 ref="addCateFormRef" 
							 label-width="100px" 
							 class="demo-ruleForm"
							 >
			  <el-form-item label="分类名称" prop="cat_name">
			    <el-input v-model="addCateForm.cat_name"></el-input>
			  </el-form-item>
				<el-form-item label="父级分类">
				  <el-cascader
				      v-model="selectedKeys"
				      :options="parentCateList"
				      :props="{ expandTrigger: 'hover',
												value:'cat_id',
												label:'cat_name',
												children:'children',
												checkStrictly: true,
												}"
				      @change="handleChange"
							clearable
							></el-cascader>
				</el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addCateDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCateDialogForm">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'Cate',
	data() {
		return {
			//保存获取到的数据列表
			cateList: [],
			//查询条件
			queryInfo: {
				type: 3,
				pagenum: 1,
				pagesize: 5
			},

			//保存总分页数
			total: 0,
			//为table指定列的定义
			columns: [
				{
					label: '分类名称',
					prop: 'cat_name'
				},
				{
					label: '是否有效',
					//表示将当前列定义为模块列
					type: 'template',
					//表示当前这一列使用模块名称
					template: 'isok'
				},
				{
					label: '排序',
					//表示将当前列定义为模块列
					type: 'template',
					//表示当前这一列使用模块名称
					template: 'order'
				},
				{
					label: '操作',
					//表示将当前列定义为模块列
					type: 'template',
					//表示当前这一列使用模块名称
					template: 'opt'
				}
			],
			//设置对话框的显示与隐藏
			addCateDialogVisible:false,
			addCateForm:{
				//保存将要添加的分类的名称
				cat_name:'',
				//父级分类的ID
				cat_pid:0,
				//分类的等级，默认要添加的是1级分类
				cat_level:0
			},
			//保存表单的规则
			addCateFormRules:{
				cat_name: [
					{ required: true, message: '请输入分类名称', trigger: 'blur' }, 
					{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
				],
			},
			//保存获取到的父级分类数据列表
			parentCateList:[],
			
			//选中的父级分类的id数组
			selectedKeys:[]
		};
	},
	created() {
		this.getCateList();
		
	},
	methods: {
		async getCateList() {
			const { data: res } = await this.$http.get('categories', {
				params: this.queryInfo
			});
			if (res.meta.status !== 200) return this.$message.error('获取商品分类失败！');
			// console.log(res)
			//吧数据列表，赋值给 cateList
			this.cateList = res.data.result;
			// console.log(this.cateList)
			//为总数据分页条数赋值
			this.total = res.data.total;
		},
		//监听pagesize改变
		handleSizeChange(newSize){
			this.queryInfo.pagesize = newSize
			this.getCateList()
		},
		//监听pagenum改变
		handleCurrentChange(newNum){
			this.queryInfo.pagenum = newNum
			this.getCateList()
		},
		//添加分类
		addCate(){
			this.addCateDialogVisible = true
			//先获取父级分类的数据列表
			this.getParentCateList()
		},
		//获取父级分类的数据列表
		async getParentCateList(){
		   const {data:res} = await this.$http.get('categories',{
				params:{
					type:2
				}
			})
			// console.log(res)
			if(res.meta.status !== 200) return this.$message.error("获取分类数据列表失败")
			this.$message.success("获取分类数据列表成功")
			this.parentCateList = res.data
		},
		
		handleChange(){
			console.log(this.selectedKeys)
			//如果selectedKeys 的 长度大于0 则证明选中父级分类
			//反之，就说明没有选中任何父级分类
			if (this.selectedKeys.length > 0) {
				//父级分类的Id
				this.addCateForm.cat_pid =  this.selectedKeys[this.selectedKeys.length - 1]
				//为当前分类的等级赋值
				this.addCateForm.cat_level = this.selectedKeys.length
				return
			} else{
				//父级分类的id
				this.addCateForm.cat_pid = 0
				//为当前分类的等级赋值
				this.addCateForm.cat_level = 0
			}
		},
		
		//点击按钮，添加新的分类
		addCateDialogForm(){
			// console.log(this.addCateForm)
			this.$refs.addCateFormRef.validate(async valid => {
				if(!valid) return
			  const {data:res} = await this.$http.post("categories",this.addCateForm)
				console.log(res)
				if (res.meta.status !== 201) return this.$message.error("添加分类失败")
				this.$message.success("添加分类成功")
				this.getCateList()
				this.addCateDialogVisible = false
			})
		},
		//关闭对话框时，重置表单中的所有数据
		cateDialgVisibleClosed(){
			this.$refs.addCateFormRef.resetFields()
			this.selectedKeys = []
			this.addCateForm.cat_pid = 0
			this.addCateForm.cat_level = 0
		},
		
		
		
	}
};
</script>

<style lang="less" scoped="scoped">
.el-row {
	margin-bottom: 20px;
}

.el-cascader{
	width: 100%;
}
</style>
